<template>
	<view>
		<!--未绑定车辆的情况-->
		<view class="my-vehichle" v-if="car && user && user.id && !car.id">
			<u-card margin="30rpx">
				<template slot="head">
					<view style="text-align: center;">绑定车辆信息</view>
				</template>
				<template slot="body">
					<view class="card-tips">
						请先完成活动报名，绑定车辆信息
					</view>
				</template>
				<template slot="foot">
					<view class="form-item" style="margin-bottom: 0;">
						<u-button type="primary" size="medium" shape="circle" @click="openPage('/pages/ucp/registration')">活动报名</u-button>
					</view>
				</template>
			</u-card>
		</view>

		<!--上传活动车辆信息-->
		<view class="my-vehichle" v-if="car.id">
			<u-card margin="30rpx">
				<template slot="head">
					<view style="text-align: center;">绑定车辆信息</view>
				</template>
				<template slot="body">
					<view class="card-data"><label>会员号</label><text>{{user.id}}</text></view>
					<view class="card-data"><label>绑定车辆</label><text>{{car.plate_number}}</text></view>
					<view class="card-data"><label>车主姓名</label><text>{{car.name}}</text></view>
					<view class="card-data"><label>汽车型号</label><text>{{car.car_brand}} {{car.car_type}}</text></view>
					<view class="card-data"><label>活动报名初始行驶公里数</label><text>{{car.mileage}} 公里</text></view>
				</template>
				<template slot="foot">
					<view style="text-align: right;color:gray;font-size: .9em;">*绑定车辆信息不能换绑，详情可咨询马孚博士爱车会客服</view>
				</template>
			</u-card>
		</view>

		<!--资料上传-->
		<view class="form">
			<u-card margin="30rpx">
				<template slot="head">
					<view style="text-align: center;">资料上传</view>
				</template>
				<template slot="body">
					<view class="form-item u-border-bottom" style="margin-bottom: 0;">
						<view class="tips">行驶里程</view>
						<input type="number" v-model="form.mileage" placeholder="请填写行驶里程(公里)" />
					</view>
					<view class="form-item u-border-bottom" style="margin-bottom: 0;">
						<view class="tips" style="flex:1;display: flex;align-items: flex-end;line-height: 1.8;" >请拍照上传当前仪表盘公里数 <u-loading style="position: absolute;left:0;top:30rpx;" :show="dashboardUploading" size="36"></u-loading></view>
						<u-upload :action="action" :file-list="dashboardImageList" :show-progress="false" upload-text="点击上传" @on-success="uploadDashboardSuccess" @on-uploaded="onDashboardUploaded" @on-remove="removeDashboardImage" @on-progress="onDashboardProgress" max-count="1"></u-upload>
					</view>
					<view class="form-item u-border-bottom" style="margin-bottom: 0;">
						<view class="tips" style="flex:1;display: flex;align-items: flex-end;line-height: 1.8;" >请拍照产品放置油箱口 <u-loading style="position: absolute;left:0;top:30rpx;" :show="actionUploading" size="36"></u-loading></view>
						<u-upload :action="action" :file-list="actionImageList" :show-progress="false" upload-text="点击上传" @on-success="uploadActionSuccess" @on-uploaded="onActionUploaded" @on-remove="removeActionImage" @on-progress="onActionProgress" max-count="1"></u-upload>
					</view>
					<view class="form-item u-border-bottom">
						<view class="tips" style="flex:1;display: flex;align-items: flex-end;line-height: 1.8;" >请拍照本次加油小票 <u-loading style="position: absolute;left:0;top:30rpx;" :show="receiptUploading" size="36"></u-loading></view>
						<u-upload :action="action" :file-list="receiptImageList" :show-progress="false" upload-text="点击上传" @on-success="uploadReceiptSuccess" @on-uploaded="onReceiptUploaded" @on-remove="removeReceiptImage" @on-progress="onReceiptProgress" max-count="1"></u-upload>
					</view>
					<view class="form-item" style="margin-bottom: 0;">
						<u-button type="primary" :disabled="loading" @tap="submit" size="medium" shape="circle">确认信息上传登记</u-button>
					</view>
				</template>
				<template slot="foot">
					<view style="text-align: left;color:gray;font-size: .9em;">*请仔细确认上传资料，如资料上传错误可再次上传；资料上传有误，会影响产品功效承诺活动的权益，详情可咨询马孚博士爱车会客服，活动最终解释权归马孚博士爱车会所有。</view>
				</template>
			</u-card>
		</view>
		<!--上传记录-->
		<view>
			<u-card margin="30rpx">
				<template slot="head">
					<view style="text-align: center;">上传记录</view>
				</template>
				<template slot="body">
					<view class="card-list-item" v-for="(event,index) in events">
						<view class="title">
							<view>{{events.length-index}}. 活动报名信息登记 - {{event.mileage}} km</view>
							<text>上传时间：{{$u.timeFormat(event.created, 'yyyy-mm-dd hh:MM:ss')}}</text>
						</view>
						<view class="btn-box">
							<u-button type="error" size="mini" :ripple="true" ripple-bg-color="#fab6b6" :plain="true">查看详情</u-button>
						</view>
					</view>

					<view v-if="events.length===0" style="padding:100rpx;display: flex;align-items: center;justify-content: center;">暂无记录</view>

				</template>
			</u-card>
		</view>
		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
		<u-toast ref="uToast"></u-toast>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				user:{},
				car:{},
				shop:{},
				action:this.$baseUrl +'/upload/image',
				fileList:[],
				dashboardImageList:[],
				actionImageList:[],
				receiptImageList:[],
				imageUploading:false,
				dashboardUploading: false,
				actionUploading:false,
				receiptUploading:false,
				form:{
					document_id:'',
					mileage:'',
					dashboard_image:'',
					action_image:'',
					receipt_image:''
				},
				events:[],
				loading:false
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		created() {
			this.getShop()
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
					console.log(res.car,res.car.id)
					if(res.car && res.car.id>0){
						this.car = res.car
						if(res.car.phone_number && !res.car.mobile){
							this.car.mobile = res.car.phone_number
						}

						this.form.document_id=this.car.id
						console.log('get-events')
						this.getDocumentEvents()
					}
				}).catch(e => {
					console.log(e)
				})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			openPage(jumpURL, params = {}) {
				this.$u.route({
					type: 'to',
					params: params,
					url: jumpURL,
					animationType: 'slide-in-bottom'
				});
			},

			submit(){
				if(!this.form.mileage){
					return alert('请填写加油时的公里数')
				}
				this.loading = true
				// 提交加油记录
				this.$u.post('/user/add-car-events', this.form).then(res => {
					this.form.mileage = ''
					this.form.dashboard_image = ''
					this.form.receipt_image = ''
					this.form.action_image = ''
					this.dashboardImageList = []
					this.receiptImageList = []
					this.actionImageList = []
					this.loading = false
					uni.showToast({
						title: '已添加',
						icon: 'success',
						duration: 3000
					})
					this.getDocumentEvents();
				}).catch(e => {
					this.loading = false
					uni.showToast({
						title: '添加失败',
						icon: 'none',
						duration: 3000
					})
				})
			},

			getDocumentEvents(){
				this.loading = true
				this.$u.post('/user/get-car-events', {document_id:this.form.document_id}).then(res => {
					this.events = res
					this.loading = false
				}).catch(e => {
					this.loading = false
				})
			},

			// dashboard-image
			uploadDashboardSuccess(data, index, lists, name){
				this.form.dashboard_image = data.data.full_url
			},
			removeDashboardImage(index, lists, name){
				this.form.dashboard_image = ''
				this.dashboardImageList = []
			},
			onDashboardProgress(res, index, lists, name){
				this.dashboardUploading = true
			},
			onDashboardUploaded(lists, name){
				this.dashboardUploading = false
			},

			// action-image
			uploadActionSuccess(data, index, lists, name){
				this.form.action_image = data.data.full_url
			},
			removeActionImage(index, lists, name){
				this.form.action_image = ''
				this.actionImageList = []
			},
			onActionProgress(res, index, lists, name){
				this.actionUploading = true
			},
			onActionUploaded(lists, name){
				this.actionUploading = false
			},

			// receipt-image
			uploadReceiptSuccess(data, index, lists, name){
				this.form.receipt_image = data.data.full_url
			},
			removeReceiptImage(index, lists, name){
				this.form.receipt_image = ''
				this.receiptImageList = []
			},
			onReceiptProgress(res, index, lists, name){
				this.receiptUploading = true
			},
			onReceiptUploaded(lists, name){
				this.receiptUploading = false
			},

			uploadPic(e) {
				var form = e.target
				var fileObj = form.files[0];
				var that = this
				let reader = new FileReader();
				reader.onload = (evt) => {
					var base64 = evt.target.result;
					var image = new Image();
					image.onload=function(){
						let form = new FormData()
						form.append('file',fileObj)
						that._imgAjax(form)
					}
					image.src = base64;
					form.value = ''
				}
				reader.readAsDataURL(fileObj);
			},
			_imgAjax(form) {
				this.loading = true
				$.ajax({
					type: 'POST',
					url: '/upload/image',
					data: form,
					dataType: 'json',
					cache: false,
					processData: false,
					contentType: false,
				}).then(res => {
					this.loading = false
					if (res.code === 200 && res.data.full_url) {
						if (window.ws && window.ws.readyState === WebSocket.OPEN) {
							let data = {cmd: 'message.send', data: {to: this.friend.friend_uid, message: '$IMG$'+res.data.full_url, msg_id: (new Date()).getTime()}}
							window.ws.send(JSON.stringify(data))
						} else {
							alert('网终连接断开，请刷新页面再试')
						}
					} else {
						alert('图片发送失败')
					}
				})
			}
		}
	}
</script>

<style scoped>
page{
	background-color: #f6f6f6;
}
.u-card{
	border-radius: 24rpx!important;
}
.card-data{
	line-height: 1.8;
}
.card-data label{
	min-width: 5em;
	font-weight: 600;
	margin-right: 18rpx;
	display: inline-block;
}
.card-data label::after{
	content:":"
}
.card-data text{
	color:#195ED7;
}
.card-tips{
	height: 5em;
	display: flex;
	align-items: center;
	color:#FFF;
	background-color: #195ED7;
	text-align: center;
	justify-content: center;
}
.card-list-item{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eee;
	padding: 10rpx 0;
	box-sizing: border-box;
	line-height: 1.8;
}
.card-list-item .btn-box{
	width:5em;
}
.card-list-item .title{
	flex:1;
}
.card-list-item .title text{
	font-size: .9em;
	color:rgba(0,0,0,.5);
}
.u-border:after{
	height: 199.7%;
}

.form-item{
	display: flex;
	// border-bottom: 1px solid #dbdbdb;
	margin-bottom: 18rpx;
	padding:18rpx 0;
}

.form-item input {
	text-align: left;
	// margin-bottom: 10rpx;
	// padding-bottom: 6rpx;
}

input[short]{
	width:4em;
}
.tips {
	color: $u-type-info;
	// margin-bottom: 44rpx;
	// margin-top: 18rpx;
	color: #02396a;
	min-width: 7em;
}
</style>
